<template>
  <view>
    <my-header bgColor="bg-white" :isBack="true">
      <block slot="content">用户</block>
      <block slot="right">
        <image
          @click="showFun"
          class="nav-right-image"
          src="@/static/images/nav_opt.png"
        ></image>
      </block>
    </my-header>
    <view class="page-content" :style="{ height: this.ContentArea + 'px' }">
      <view class="search-content">
        <view class="page-search">
          <view class="search">
            <view class="search-left">
              <image src="@/static/images/search.png" mode="aspectFit" />
            </view>
            <input
              class="search-center"
              type="text"
              placeholder="请输入用户账号"
              placeholder-class="search-placeholder"
              v-model="searchValue"
              @blur="getList(1)"
            />
          </view>
        </view>
      </view>
      <view class="content">
        <scroll-view
          class="scroll-content"
          :scroll-y="true"
          :refresher-enabled="true"
          :refresher-triggered="refreshing"
          @refresherrefresh="onRefresh"
          :refresher-background="'#F9F9F9'"
          @scrolltolower="onEndReached"
        >
          <uni-swipe-action>
            <view
              class="swipe-action-wrapper"
              v-for="item in dataList"
              :key="item.id"
            >
              <uni-swipe-action-item
                :right-options="rightOptions"
                @click="swipeClick(item, $event)"
              >
                <view class="role-item">
                  <view class="role-name">
                    {{ item.realname }}
                  </view>
                  <view class="role-line">
                    <view class="role-line-label"> 用户账号 </view>
                    <view class="role-line-content">
                      {{ item.username }}
                    </view>
                  </view>
                  <view class="role-line">
                    <view class="role-line-label"> 状态 </view>
                    <view class="role-line-content">
                      {{ item.status_dictText }}
                    </view>
                  </view>
                </view>
              </uni-swipe-action-item>
            </view>
          </uni-swipe-action>
        </scroll-view>
      </view>
    </view>
    <view class="fun-wrap" v-show="isShowFun" @click="hideFun">
      <view class="fun-box" :style="{ top: this.CustomBar + 'px' }">
        <view class="fun-item" @click.stop="gotoAdd">
          <image class="fun-icon" src="@/static/images/addIcon.png" />
          <text class="fun-text">新增</text>
        </view>
      </view>
    </view>
    <uni-popup ref="deletePopup" background-color="#fff" :mask-click="false">
      <view
        style="
          text-align: center;
          background-color: #ffffff;
          padding: 11rpx;
          width: 580rpx;
          height: 470rpx;
          border-radius: 42rpx;
        "
      >
        <view class="submit-item">
          <image class="submit-icon" src="@/static/images/deleteIcon.png" />
        </view>
        <view style="margin-top: 28rpx">
          <text class="submit-text">确定删除该用户吗</text>
        </view>
        <br />
        <view
          style="display: flex; align-items: center; justify-content: center"
        >
          <button
            @click="sureDelete"
            style="
              border-radius: 20rpx;
              background-color: red;
              color: rgba(255, 255, 255, 1);
              width: 230rpx;
              margin-top: 50rpx;
            "
          >
            确定
          </button>
          <button
            @click="cancelDelete"
            style="
              border-radius: 20rpx;
              background-color: gray;
              color: rgba(255, 255, 255, 1);
              width: 230rpx;
              margin-top: 50rpx;
            "
          >
            取消
          </button>
        </view>
      </view>
    </uni-popup>
    <uni-popup
      ref="addPopupRef"
      :mask-click="false"
      type="bottom"
      background-color="#fff"
    >
      <view class="add-popup-wrapper">
        <view class="add-popup-header">
          <uni-icons
            type="closeempty"
            size="22"
            class="close-icon"
            @click="inlinePopupClose"
          ></uni-icons>
        </view>
        <view class="search-content">
          <view
            class="page-search"
            style="padding-left: 0; justify-content: center"
          >
            <view class="search">
              <view class="search-left">
                <image src="@/static/images/search.png" mode="aspectFit" />
              </view>
              <input
                class="search-center"
                type="text"
                placeholder="请输入用户账号"
                placeholder-class="search-placeholder"
                v-model="inlineSearchValue"
                @blur="getInlineUserList(1)"
              />
            </view>
          </view>
        </view>
        <view class="add-popup-content">
          <scroll-view
            class="add-popup-scroll"
            :scroll-y="true"
            :refresher-enabled="true"
            :refresher-triggered="inlineRefreshing"
            @refresherrefresh="onInlineRefresh"
            :refresher-background="'#F9F9F9'"
            @scrolltolower="onInlineEndReached"
          >
            <view class="checkbox-list">
              <uni-data-checkbox
                mode="list"
                multiple
                v-model="currentSelectedValue"
                :localdata="inlineDataList"
              />
            </view>
          </scroll-view>
        </view>
        <view class="add-popup-action">
          <button type="primary" @click="onInlineOkClick">确认</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import MyHeader from "../../../components/my-header/my-header.vue";
import { createNamespacedHelpers } from "vuex";

const { mapActions } = createNamespacedHelpers("roleManagement");

export default {
  components: {
    "my-header": MyHeader,
  },
  onLoad(options) {
    this.roleId = options.id;
  },
  mounted() {
    this.getList(1);
  },
  data() {
    return {
      roleId: "",
      refreshing: false,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      inlinePageNo: 1,
      inlinePageSize: 20,
      inlineTotal: 0,
      inlineDataList: [],
      inlineSearchValue: "",
      searchValue: "",
      deleteId: "",
      isShowFun: false,
      inlineRefreshing: false,
      currentSelectedValue: [],
      rightOptions: [
        {
          text: "删除",
          style: {
            backgroundColor: "red",
          },
        },
      ],
    };
  },
  methods: {
    ...mapActions(["setEditData"]),
    getList(pageNo) {
      this.$http
        .get("/sys/user/userRoleList", {
          params: {
            column: "createTime",
            order: "desc",
            field: "id,,username,realname,status_dictText,action",
            pageNo,
            pageSize: this.pageSize,
            roleId: this.roleId,
            username: this.searchValue,
          },
        })
        .then((res) => {
          const data = res.data || {};
          if (data?.success) {
            const { records, current, size, total } = data?.result || {};
            this.pageNo = current;
            this.total = total;
            this.pageSize = size;
            if (current === 1) {
              this.dataList = records;
            } else {
              this.dataList = this.dataList.concat(records);
            }
          } else {
            this.$tip.toast(data.message);
          }
        })
        .finally(() => {
          this.refreshing = false;
        });
    },
    onRefresh() {
      this.refreshing = true;
      this.getList(1);
    },
    onEndReached() {
      if (this.pageNo * this.pageSize < this.total) {
        this.getList(++this.pageNo);
      }
    },
    swipeClick(item, e) {
      this.deleteId = item.id;
      this.$refs.deletePopup.open("center");
    },
    cancelDelete() {
      this.deleteId = "";
      this.$refs.deletePopup.close();
    },
    sureDelete() {
      this.$http
        .delete(
          `/sys/user/deleteUserRole?roleId=${this.roleId}&userId=${this.deleteId}`
        )
        .then((res) => {
          this.$tip.toast(res.data.message);
          if (res.data.success) {
            this.cancelDelete();
            this.getList(1);
          }
        });
    },
    hideFun() {
      this.isShowFun = false;
    },
    showFun() {
      this.isShowFun = true;
    },
    gotoAdd() {
      this.hideFun();
      this.$refs.addPopupRef.open("bottom");
      this.getInlineUserList(1);
    },

    getInlineUserList(pageNo) {
      this.$http
        .get("/sys/user/list", {
          params: {
            pageNo,
            pageSize: this.inlinePageSize,
            column: "createTime",
            order: "desc",
            username: this.inlineSearchValue,
          },
        })
        .then((res) => {
          const data = res.data || {};
          if (data.success) {
            const { records, current, size, total } = data?.result || {};
            this.inlinePageNo = current;
            this.inlineTotal = total;
            this.inlinePageSize = size;
            const dataList = records?.map((item) => ({
              value: item.id,
              text: `${item.realname}（${item.username}）`,
            }));
            if (current === 1) {
              this.inlineDataList = dataList;
            } else {
              this.inlineDataList = this.inlineDataList.concat(dataList);
            }
          } else {
            this.$tip.toast(data.message);
          }
        })
        .finally(() => {
          this.inlineRefreshing = false;
        });
    },
    onInlineRefresh() {
      this.inlineRefreshing = true;
      this.getInlineUserList(1);
    },
    onInlineEndReached() {
      if (this.inlinePageNo * this.inlinePageSize < this.inlineTotal) {
        this.getInlineUserList(++this.inlinePageNo);
      }
    },
    onInlineOkClick() {
      this.$http
        .post("/sys/user/addSysUserRole", {
          roleId: this.roleId,
          userIdList: this.currentSelectedValue,
        })
        .then((res) => {
          this.$tip.toast(res.data.message);
          if (res.data.success) {
            this.inlinePopupClose();
            this.getList(1);
            this.inlinePageNo = 1;
          }
        });
    },
    inlinePopupClose() {
      this.$refs.addPopupRef.close();
      this.currentSelectedValue = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-right-image {
  width: 80rpx;
  height: 80rpx;
  margin-left: 15px;
}

.page-content {
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;

    .scroll-content {
      height: 100%;
    }
  }
}

.page-search {
  padding-left: 34rpx;
  margin-bottom: 12rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.search {
  width: 688rpx;
  height: 86rpx;
  background-color: rgba(249, 249, 249, 1);
  border-radius: 60rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 24rpx;
  padding-right: 24rpx;

  .search-left {
    width: 28rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-center {
    margin-left: 22rpx;
  }

  .search-placeholder {
    font-size: 28rpx;
    font-weight: 400;
    color: #7c7c7c;
  }
}

.swipe-action-wrapper {
  background: #ffffff;
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  margin: 14px 17px;
  box-sizing: border-box;
  overflow: hidden;
}

.role-item {
  box-sizing: border-box;
  padding: 16px 24px;

  .role-name {
    color: #101317;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
  }

  .role-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    &-label {
      flex: 0 0 70px;
    }

    &-content {
      flex: 1;
    }
  }
}

.submit-icon {
  width: 118rpx;
  height: 118rpx;
  margin-top: 58rpx;
}

.fun-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 3, 3, 0.28);
  z-index: 10000;
}

.fun-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 556rpx;
  height: 444rpx;
  border-top-left-radius: 42rpx;
  border-bottom-left-radius: 42rpx;
  border-bottom-right-radius: 42rpx;
  position: absolute;
  right: 74rpx;
  background-color: #ffffff;
  padding-top: 35rpx;
}

.fun-item {
  width: 185rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 44rpx;
}

.fun-icon {
  width: 92rpx;
  height: 92rpx;
  margin-bottom: 22rpx;
}

.add-popup-wrapper {
  box-sizing: border-box;
  padding: 11rpx;
  width: 100%;
  background-color: #ffffff;
  border-radius: 42rpx 42rpx 0 0;
  height: 600px;
  display: flex;
  flex-direction: column;
}

.add-popup-header {
  position: relative;
  box-sizing: border-box;
  padding: 20px 10px;

  .close-icon {
    position: absolute;
    right: 10px;
    top: 8px;
  }
}

.add-popup-content {
  flex: 1;
  overflow: hidden;
}

.add-popup-scroll {
  height: 100%;
}

.checkbox-list {
  box-sizing: border-box;
  padding: 0 16px;
}
</style>
